<template>
  <div>
    <div class="tabs">
      <div 
        v-for="item in activeTabList" 
        :key="item.id" 
        @click="changeTab(item)" 
        :class="activeTab === item.active ? 'active_item tabsItem': 'tabsItem' "
      >
        <div style="z-index: 1;margin-bottom: 5px;">
          {{ item.name }} <span v-if="item.id == 1">¥{{info.all || 0}}</span>
        </div>
        <div v-if="item.id == 1" class="info">
          <div> 本金：¥{{info.balance || 0}}</div>
          <div> 赠金：¥{{info.gift || 0}}</div>
        </div>
        <div v-if="item.id == 2" class="info">
          余额：{{info.point || 0}}积分
        </div>
        <div v-if="item.id == 3" class="info">
          剩余：{{info.service || 0}}张
        </div>
        <div v-if="item.id == 4" class="info">
          剩余：{{info.coupon || 0}}张
        </div>
      </div>
    </div>
    <div v-if="activeTab == 'assetFirst'">
      <moneyList  :clienId="clienId + ''"/>
    </div>
    <div v-if="activeTab == 'assetSecond'">
      <pointsList  :clienId="clienId + ''"/>
    </div>
    <div v-if="activeTab == 'assetThree'">
        <serveRecord  :clienId="clienId + ''" :detail="detail"/>
    </div>
    <div v-if="activeTab == 'assetFour'">
        <cardList :clienId="clienId + ''" :detail="detail" />
    </div>
  </div>
</template>

<script>
import serveRecord from '../../serve/serveList.vue'
import moneyList from './moneyList.vue'
import pointsList from './pointsList.vue'

import cardList from './couponList.vue'
import {surplusAccountCount} from '@/api/client'
export default {
  name: "ClientList",
  props: {
    clienId: {
      type: String,
      default: ""
    },
  detail: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  components: {
    serveRecord,
    pointsList,
    moneyList,
    cardList
  },
  data() {
    return {
      info:{},
      activeTab: 'assetFirst',
      activeTabList: [
        { name: '账户总额', active: 'assetFirst', id: 1 },
        { name: '积分账户', active: 'assetSecond', id: 2 },
        { name: '服务卡项', active: 'assetThree', id: 3 },
        { name: '优惠券', active: 'assetFour', id: 4},
      ],
      activeBarStyle: {
        width: '0px',
        transform: 'translateX(0)'
      }
    };
  },
  mounted(){
    this.getInfo()
  },
  methods: {
    changeTab(e) {
      this.activeTab = e.active;
    },
    getInfo(){
      surplusAccountCount({customer_id:this.clienId}).then(res=>{
        this.info = res.data
      })
    }
  }
};
</script>

<style lang="scss" scoped>
.tabs {
  margin-bottom: 20px;
  font-size: 18px;
  font-weight: 600;
  position: relative;
  display: flex;
  column-gap: 40px;
  // color: #666;
  line-height: 24px;
  color: #33bea7;


  
  .tabsItem{
    width: 180px;
    border: 1px solid #33bea7;
    padding: 10px 20px;
    border-radius: 20px;
  }
  
  div {
    cursor: pointer;
    position: relative;


    &::after {
      content: ''; // 必须设置content属性
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%; // 宽度与选项卡标签一致
      height: 100%;
      background: linear-gradient(to right, rgba(51, 190, 167, 1), rgba(51, 190, 167, 0.4));
      transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
      transform-origin: left;
      transform: scaleX(0); // 默认不显示
      border-radius: 20px;
    }
    .info{
      font-size: 14px;
       z-index: 1;
    }
  }
  
  .active_item {
    color: #fff;
    border: none;
    /* 显示高亮指示器 */
    &::after {
      transform: scaleX(1); // 完全显示
    }
  }
}
</style>
    